<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>

    <style>
        .myDiv{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        .myDiv2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>


</head>

<body>

<div id="app">
    <h3>v-if:做判断使用 如果条件不满足标签不会存在</h3>
    <h3>v-show:和v-if用法一样 但是原理不一样:不满足的情况下使用的是display: none;便签还是存在的</h3>
    <span v-if="5 < 10">5 < 10</span><br/>
    <h4 v-if="age >= 18">成年</h4>
    <h4 v-if="age < 18">未成年</h4>

    <h4 v-show="age >= 18">成年</h4>
    <h4 v-show="age < 18">未成年</h4>
</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                age:22
            }
        }
    }).mount('#app')
</script>

</html>